<script setup>
import * as echarts from 'echarts'
import api from '@/api/home'
import { formatMoney } from '@/utils';

import { ref,onMounted } from 'vue';

const feeList = ref([])
const chartColumn = ref(null)
const option = ref({
        grid:{
		  left:60,
		  right:10,
		  bottom:40,
		  top:25
        },
		tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
		  formatter:function(params){
			  var str = `<div style="min-width:160px;">
							<div style="font-size:13px;margin:-3px 0 3px 0;">${feeList.value[params[0].dataIndex].month}</div>
							<div style="display: flex;align-items: center;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:100px;background:${params[0].color};"></div><div style="width:90px;margin:0 7px;">作业记录</div><div style="flex:1;color:#666;font-weight:bold;text-align:right;">${formatMoney(feeList.value[params[0].dataIndex].amountNormal)}</div></div>
							<div style="display: flex;align-items: center;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:100px;background:${params[1].color};"></div><div style="width:90px;margin:0 7px;">特殊作业记录</div><div style="flex:1;color:#666;font-weight:bold;text-align:right;">${formatMoney(feeList.value[params[0].dataIndex].amountSpec)}</div></div>
							<div style="display: flex;align-items: center;margin-bottom:3px"><div style="width:10px;height:10px;border-radius:100px;background:#3feb6a;"></div><div style="width:90px;margin:0 7px;">合计</div><div style="flex:1;color:#666;font-weight:bold;text-align:right;">${formatMoney(feeList.value[params[0].dataIndex].total_amount)}</div></div>
						</div>`
			  return str
		  }
        },
		legend: {
          icon: 'roundRect',
          right: "0",
		  top:0,
		  itemWidth: 10,
		  itemHeight: 10,
          textStyle: {
            color: '#000',
            fontSize: 12
          }
        },
        xAxis: {
          type: 'category',
          // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月','12月'],
          data: [],
		  axisTick: {
		    show: false
		  }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar',
            stack: 'a',
            name: '作业记录',
            color: '#3b75d2',
            barWidth: '12'
          },
          {
            data: [],
            type: 'bar',
            stack: 'a',
            name: '特殊作业记录',
            color: '#e19053',
			itemStyle: {  
				normal: {  
					// 设置圆角，这里以左上角和右上角为例，右下角和左下角为0  
					barBorderRadius: [10, 10, 0, 0]
				}  
			}
          },
        ]
      })


onMounted(() => {
  initChart()
})
const initChart = () => {
  var chart = echarts.init(chartColumn.value)
  chart.resize()
  api.getFeeList().then(res=>{
	  feeList.value = res.data;
	  if(res.data.length > 0){
		  option.value.series[0].data = res.data.map(v => v.amountNormal)
		  option.value.series[1].data = res.data.map(v => v.amountSpec)
		  option.value.xAxis.data = res.data.map(v => v.month)
	  }else{
		  option.value.series[0].data = []
		  option.value.series[1].data = []
	  }
  }).then(_=>{
	  chart.setOption(option.value)
  })
}


</script>

<template>
  <div ref="chartColumn" className="echarts"></div>
</template>

<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>